<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装一个简单的Ajax</title>
</head>
<body>
<script type="text/javascript">
    /*
    定义一个 sendAjax 函数，对 xhr 的 get 请求进行封装：
        1. 该函数接收两个参数：url（请求地址）、data（参数对象）
        2. 该函数返回一个 Promise 实例：
            (1). 若 Ajax 请求成功，则 Promise 实例成功，成功的 value 是返回的数据。
            (2). 若 Ajax 请求失败，则 Promise 实例失败，失败的 reason 是错误提示。
     */
    function sendAjax(url, data) {
        return new Promise((resolve, reject) => {
            // 实例 xhr
            const xhr = new XMLHttpRequest()
            // 绑定监听
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response)
                    else reject('请求出了点问题')
                }
            }
            // 整理参数
            let str = ''
            for (let key in data) {
                str += `${key}=${data[key]}`
            }
            str = str.slice(0, -1)
            xhr.open('GET', url + '?' + str)
            xhr.responseType = 'json'
            xhr.send()
        })
    }

    const x = sendAjax('https://api.apiopen.top/api/getHaoKanVideo', {page: 2, size: 10})
    x.then((value) => {
        console.log(value)
    }, (reason) => {
        console.log(reason)
    })
</script>
</body>
</html>
